import { useIntersectionObserver } from '@vueuse/core'

export const lazyLoadPlugin = {
    install(app){
        app.directive('lazyLoad', {
            mounted(el, binding) {
                //el 指令绑定到的元素。这可以用于直接操作 DOM。
                /*binding 
                一个对象，包含以下属性。
                value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。 （常用）
                oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
                arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
                modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
                instance：使用该指令的组件实例。
                dir：指令的定义对象。
                */
                // console.log(el, binding.value)
                const {stop}=useIntersectionObserver(
                    el,
                    ([{ isIntersecting }]) => {
                        if(isIntersecting){
                            el.src= binding.value
                            stop()//防止重复监听
                        }
                    },
                  )
            },
        })
    }
}